<template>
  <gui-page :custom-header="true" :full-page="true" :status-bar-class="['gui-bg-white']">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">登录/注册</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-flex gui-flex1 gui-column">
        <view style="padding: 50rpx">
          <view class="gui-flex gui-column gui-align-items-center gui-justify-content-center">
            <gui-image src="/static/logo.svg" />
            <view class="gui-flex1 gui-h4 gui-bold gui-margin-top">志愿填报</view>
          </view>
          <view style="margin-top: 208rpx">
            <button
              v-if="!checked"
              class="gui-button gui-bg-primary gui-noborder"
              style="border-radius: 50rpx"
              type="default"
              @tap.stop="submit"
            >
              <text class="gui-color-white gui-button-text">用户一键登录</text>
            </button>
            <button
              v-else
              class="gui-button gui-bg-primary gui-noborder"
              open-type="getPhoneNumber"
              style="border-radius: 50rpx"
              type="default"
              @getphonenumber="submit"
            >
              <text class="gui-color-white gui-button-text">用户一键登录</text>
            </button>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
            <gui-radio :checked="checked" @change="radioChange">
              <view class="gui-flex gui-row">
                <text class="gui-text gui-primary-text" @tap.stop="checked = !checked">我同意并遵守</text>
                <text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage">《用户协议》</text>
                <text class="gui-text gui-primary-text">和</text>
                <text class="gui-text gui-color-blue" @tap.stop.prevent="openXYPage">《隐私协议》</text>
              </view>
            </gui-radio>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const checked = ref<boolean>(false)
const radioChange = (e: any) => {
  console.log(e[0])
  checked.value = e[0]
}
const openXYPage = () => {
  uni.showToast({
    title: '打开协议页面',
    icon: 'none',
  })
}
const submit = (e: any) => {
  if (!checked.value) {
    uni.showToast({ title: '请先同意用户协议和隐私协议', icon: 'none' })
    return
  }
  // 表单数据
  console.log('登录')
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      console.log(loginRes)
      console.log(e)
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        uni.showToast({
          title: '登录成功',
          icon: 'none',
        })
        uni.navigateTo({
          url: '../wxUserInfo/index',
        })
      } else {
        uni.showToast({
          title: '登录失败',
          icon: 'none',
        })
      }
    },
  })
}
</script>
<style scoped>
.login-logo {
  width: 180rpx;
  height: 180rpx;
  font-size: 80rpx;
  text-align: center;
  line-height: 120rpx;
  padding: 30rpx;
  border-radius: 18rpx;
}
.other-login-icons {
  width: 88rpx;
  height: 88rpx;
  text-align: center;
  font-size: 70rpx;
  margin: 20rpx;
}
</style>
